<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" href="../../css/aui.css">
<style media="screen">
*{ margin: 0 ; padding: 0}
  body{ background: #FFF;margin: 0}
  #header{ height:55px;;background-color: #fc6d4d;padding-top: 10px;}
  #back { float: left; padding-left: 10px; padding-top: 10px;padding-right: 10px;}
  #back img{ width: 16px; height: 16px}
  #put{ width:80%; height: 35px; background: #fff; margin: 0 auto; border-radius: 50px;position: relative;left:12px;}
  #put input{ padding-left:4px;;color: #333; line-height:35px; float: left; border: none; background: #fff; box-sizing: none; width:60%;; font-size: 12px; height:35px;font-size: 13px;line-height: 35px;padding-top: 3px;}
  #put input::-webkit-input-placeholder {color:#B8B8B8;font-size: 12px;}
  #put input::-moz-placeholder{color:#B8B8B8;font-size: 12px;}
  #put input:-moz-placeholder {color:#B8B8B8;font-size: 12px;}
  #put input:-ms-input-placeholder {color:#B8B8B8;font-size: 12px;}
  #put img{ width: 15px; height: 15px; float: left; margin-top:10px;margin-right: 10px;position: absolute;;right:4px;}
  #put h3{position: absolute;right:0;top: 9px;color: #666666; font-size: 13px;margin-right: 10px}
  #put input:focus{outline: none}
  #lishi{ margin-top:30px;max-width: 100%; overflow: hidden;width: 100%;box-sizing: border-box;padding: 0 15px;}
  #lishi #lishi_top { height: 20px; margin-bottom: 5px}
  #lishi #lishi_top h4{ font-size: 14px;color: #666; float: left;font-weight: bold;}
  #lishi #lishi_top img{ float: right; width: 16px; height: 16px; padding-right: 21px}
  #lishi #lishi_list span{color: #777777;padding: 5px;  background: #F8F8FA;float: left;margin: 8px;margin-left: 0;font-size: 12px;}
  #lishi #gengduo span {color: #777777;padding: 5px;;float: left;margin: 8px;font-size: 12px;}
  #lishi #gengduo span img{width:16px;margin: 0 auto;}
  #reso{ margin-top:10px;width: 100%;box-sizing: border-box;padding: 0 15px;}
  #reso .heng{ height: 5px; background: #F5F5F5}
  #reso #reso_top { height: 40px; margin-bottom: 5px;}
  #reso #reso_top h4{ font-size: 14px; color: #666; float: left; line-height:40px;font-weight: bold;}
  #reso #reso_c span{ display: block; color: #777777; padding: 5px;  background: #F8F8FA;  float: left;margin-right: 8px;font-size: 12px;margin-bottom: 8px;}
select{float: left; width: 30px;; height: 100%;font-size: 13px;color: #666;margin-left:8px;}
.clearfix{clear: both;}
</style>
</head>

<body>
  <header id="header">
    <div id="back"  onclick="api.closeWin();" tapmode><img src="../../image/back_blank.png" alt="">  </div>
    <div id="put" tapmode>

      <select id="type">
        <option value="xm">项目</option>
        <option value="js">机手</option>
        <option value="jy">加油</option>
        <option value="tc">拖车</option>
        <option value="wx">维修</option>
      </select>
      <form onsubmit='return put();'>
          <input type="search" id="search_n" name="" placeholder="请输入想要搜索的内容" value="">
      </form>
        <img src="../../image/index_search1.png" alt="" onclick="put()">
    </div>

  </header>

<div id="cont">
  <div id="lishi">
    <div id="lishi_top">
          <h4>历史搜索</h4>
          <img src="../../image/del.png">
    </div>
    <div tapmode id="lishi_list"  v-for="site in lishi" @click="put(site.title,site.type)">
      <span :title="site.type">{{site.title}}</span>

    </div>
    <div id="gengduo" tapmode onclick="gengduo()">
      <span><img src="../../image/xiala.svg" alt=""></span>
    </div>
  </div>


  <div id="reso">
    <div id="reso_top">
          <h4>热门搜索</h4>
    </div>
    <div id="reso_c"  v-for="site in reso" @click="put(site.title,site.type)">
      <span :title="site.type">{{site.title}}</span>

    </div>
  </div>

</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {

              //遍历历史记录
               list = new Vue({
                         el: '#cont',
                         data: $tools.getdata()
                     });
        gengduo();
        reso_ajax();

    };

var list;
var limt = 3;


function put(title,type){
  var name = $api.val($api.byId('search_n'));

//搜索
  if(title&&type){
    //历史
    //console.log(data);
    api.openWin({
        name: 'searchlist_win',
        url: 'searchlist_win.html',
        pageParam: {
            sele: type,
            name:title
        }
    });
  }else if(name!=""){
    //直接搜索
  var sele = $api.val($api.byId('type'));
    api.ajax({
        url: $api.getStorage("backapi")+'/index.php?c=home&m=ins_search&uid='+$api.getStorage("member"),
        method: 'post',
        data: {
            values: {
                cont: name,
                type:sele,
            }
        }
    },function(ret, err){
        if (ret) {
            console.log( JSON.stringify( ret ) );
        } else {
            console.log( JSON.stringify( err ) );
        }
    });



    api.openWin({
        name: 'searchlist_win',
        url: 'searchlist_win.html',
        pageParam: {
            sele: sele,
            name:name
        }
    });
    //console.log(name);
  }
}




function gengduo(){

  limt+=3;
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?c=home&m=lishi_ajax&uid='+$api.getStorage("member")+'&limt='+limt,
      method: 'post',
  },function(ret, err){
      if (ret.status!="") {
        list.lishi=ret.status
          console.log( JSON.stringify( ret ) );
      } else {
          //console.log( JSON.stringify( err ) );
          api.toast({
               msg: '没有更多了',
               duration: 2000,
               location: 'bottom'
           });
      }
  });

}


function lishi_ajax(){


}

function reso_ajax(){
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?c=home&m=reso_ajax',
      method: 'post',
  },function(ret, err){
      if (ret.status!="") {
        list.reso=ret.status
          console.log( JSON.stringify( ret ) );
      } else {
          //console.log( JSON.stringify( err ) );
          api.toast({
               msg: '没有更多了',
               duration: 2000,
               location: 'bottom'
           });
      }
  });

}



</script>

</html>
